const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "index.js",
        path: resolve(__dirname, "dist"),
    },
    module: {
        rules: [
            // 处理less文件
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },

            // 处理图片资源
            {
                test: /\.(jpg|png|gif)$/,
                loader: "url-loader",
                options: {
                    // 图片小于8kb时，转成base64
                    limit: 8 * 1024,
                    // 重命名
                    // [hash:10] 取图片的hash的前10位
                    // [ext] 取源文件扩展名
                    name: "[hash:10].[ext]",
                },
            },

            // 处理html文件中的img图片(负责引入img，从而能被url-loader进行处理)
            {
                test: /\.html$/,
                loader: "html-loader",
                options: {
                    // 关闭url-loader的es6模块化
                    esModule: false,
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
        }),
    ],
    mode: "development",
};
